<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件基础-component通过 Prop 向子组件传递数据</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <style>

    </style>
</head>
<body>
<div id="app">

    <blog-post
            v-for="post in posts"
            v-bind:key="post.id"
            v-bind:title="post.title"
    ></blog-post>

    <hr>
    <div>
        <all-blog  v-for="p in posts"
                   v-bind:key="p.id+100"
                   v-bind:post="p">

        </all-blog>
    </div>
</div>


<script>


    Vue.component('blog-post', {
        props:['title'],
        template:"<h3>{{title}}</h3>"

    });

    Vue.component('all-blog', {
        props:['post'],
        template:"<div class='all-blog'>" +
            "<h3>{{post.title}}</h3>" +
            "<div v-html=\"post.content\"></div>" +
            "</div>"

    });

    var app= new Vue({
        el:'#app',
        data:{
            posts: [
                { id: 0, title: 'My journey with Vue' ,content:'qqqqqqqqqqqqqqqqq'},
                { id: 1, title: 'Blogging with Vue' ,content:'wwwwwwwwww' },
                { id: 2, title: 'Why Vue is so fun' ,content:'rrrrrrrr' }
            ]
        },
        methods:{

        }
    })
</script>
</body>
</html>
